<template>
  <el-row>
    <el-button-group v-if="buttonConfig.isGroup">
      <el-button
        v-for="item in buttonConfig.buttonList.slice(0, buttonConfig.throttle)"
        :key="item.affairs"
        :size="item.size"
        :type="item.type"
        :icon="item.icon"
        :disabled="item.disabled"
        @click="handleClick(item.affairs)"
      >
        {{ item.name }}
      </el-button>
      <el-dropdown v-if="dropdownList.length" @command="handleCommand">
        <el-button :type="buttonConfig.dropdownType">
          更多<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in dropdownList"
            :key="index"
            :command="item.affairs"
          >
            {{ item.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-button-group>
    <template v-else>
      <el-button
        v-for="item in buttonConfig.buttonList.slice(0, buttonConfig.throttle)"
        :key="item.affairs"
        :size="item.size"
        :type="item.type"
        :icon="item.icon"
        :disabled="item.disabled"
        @click="handleClick(item.affairs)"
      >
        {{ item.name }}
      </el-button>
      <el-dropdown v-if="dropdownList.length" @command="handleCommand">
        <el-button :type="buttonConfig.dropdownType" style="margin-left: 10px">
          更多<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in dropdownList"
            :key="index"
            :command="item.affairs"
          >
            {{ item.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>
  </el-row>
</template>

<script>
const defaultConfig = {
  dropdownType: 'primary',
  throttle: 3,
  isGroup: true, // 是否分组
  buttonList: []
}
export default {
  props: {
    config: {
      type: Object, // 按钮配置
      default: () => {}
    }
  },
  data() {
    return {
      buttonConfig: {
        ...defaultConfig,
        ...this.config
      },
      dropdownList: []
    }
  },
  created() {
    const { buttonList, throttle } = this.buttonConfig
    this.dropdownList = buttonList.slice(throttle)
  },
  methods: {
    handleClick(affairs) {
      this.$emit('handle' + affairs)
    },
    handleCommand(command) {
      this.$emit('handle' + command)
    }
  }
}
</script>
